﻿@model Occupie.Models.Student
@using Occupie.Helpers

<script src="~/js/jquery-ui-1.10.3.custom.js"></script>

<figure class="main">
    <figcaption>
        @if (Model.PicturePath != null)
        {
            if (Model.UserId == WebSecurity.CurrentUserId)
            {
            @Ajax.ActionImageLink(@Url.Content(Model.PicturePath), "student-picture",
            "hover(this);", "unhover(this);", "", "UploadImage", "Student", new { id = Model.UserId }, new AjaxOptions
            {
                HttpMethod = "GET",
                UpdateTargetId = "uploadDialog",
                InsertionMode = InsertionMode.Replace,
                OnSuccess = "openUploadPopup"
            })
            }
            else
            {
            <img src='@Url.Content(Model.PicturePath)' />
            }
        }

        <div class="dialog" id="uploadDialog" style="display: none;"></div>

        <script type="text/javascript">

            function hover(element) {
                element.setAttribute('src', '@Url.Content("/Images/change-avatar.png")');
            }
            function unhover(element) {
                element.setAttribute('src', "@Url.Content(Model.PicturePath)");
            }

            $(document).ready(function () {
                $("#uploadDialog").dialog(
                    {
                        autoOpen: false,
                        width: 300,
                        height: 'auto',
                        modal: true
                    }
                );
            });
            function openUploadPopup() {
                $("#uploadDialog").dialog("open");
            }
        </script>

        <h2>@Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName)</h2>
    </figcaption>
</figure>


